<template>
    <div id="order">
        <van-nav-bar
        title="订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <!-- 选择地址 -->
        <h3 style="margin-left: 10px;" class="van-doc-demo-block__title" id="ji-chu-yong-fa">收货地址</h3>
        <div v-if="!address" @click="selectAdd" class="van-cell van-cell--center van-cell--clickable van-cell--borderless van-contact-card van-contact-card--add" role="button" tabindex="0">
            <i class="van-badge__wrapper van-icon van-icon-add-square van-cell__left-icon"></i>
            <div class="van-cell__title van-contact-card__title">选择地址</div>
            <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"></i>
        </div>
        <!-- 地址 -->
        <div v-else class="van-address-item">
            <div class="van-cell van-cell--borderless">
                <div class="van-cell__title van-address-item__title">
                    <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
                        <van-icon style="margin: 0 10px; font-size: 20px;" name="location-o" />
                        <span style="margin: 0;" class="van-radio__label">
                            <div class="van-address-item__name">{{address.consignee?address.consignee:address.name}} {{address.mobile?address.mobile:address.tel}}</div>
                            <div class="van-address-item__address">{{address.region_text?address.region_text:address.address}}</div>
                        </span>
                    </div>
                </div>
            </div>
            <van-button @click="selectAdd" style="margin-top: 10px;" size="small" type="primary">更换其他地址</van-button>
        </div>
        <!-- 订单详情 -->
        <h3 style="margin-left: 10px;" class="van-doc-demo-block__title" id="ji-chu-yong-fa">订单详情</h3>
        <div class="orderitemList">
            <van-card
            v-for="item in itemList"
            :key="item.id"
            :num="item.nums?item.nums:1"
            :price="item.total?item.total:item.price"
            :title="item.product?item.product.name:item.name"
            :thumb="item.product?item.product.thumbs_text:item.thumbs_text"
            />
             <!-- 订单备注 -->
             <van-cell-group inset style="background-color:#f6f6f6;margin: 10px 0;">
                <van-field
                    v-model="remark"
                    rows="2"
                    autosize
                    label="订单备注"
                    type="textarea"
                    maxlength="150"
                    placeholder="请输入备注"
                    show-word-limit
                />
            </van-cell-group>
        </div>
       
        <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" />
    </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";

    const onClickLeft = () => history.back();

    onBeforeMount(()=>{
        getData()
        getAddress()
    })

    // 获得订单数据
    const {proxy} = getCurrentInstance();
    const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{};
    // 购物车id
    const id = proxy.$route.query.id
    // 商品id
    let proid = proxy.$route.query.proid
    let total = parseFloat(proxy.$route.query.total) 
    total = ref(Number(total.toFixed(2)))
    let itemList = ref([])
    const getData = async ()=>{
        let data = {
            id:id?id:proid,
        }
        // 判断是否是直接购买
        if(proid){
            let result = await proxy.$POST({
                url:"/product/buy",
                params:data
            })
            if(result.code){
                itemList.value.push(result.data)
                return false
            }else{
                proxy.$fail(result.msg);
                return false
            }
        }else{
            let result = await proxy.$POST({
                url:"/cart/index",
                params:data
            })
            if(result.code){
                itemList.value = result.data
                proid = result.data.map((obj)=>{
                    return obj.product.id
                })
                proid = proid.join(",")
                return false
            }else{
                proxy.$fail(result.msg);
                return false
            }
        }
      
    }

    // 获得地址信息
    let address = ref({})
    const getAddress = async () => {
        // 判断地址是否为空,不为空则不需要请求
        if(!(Object.keys(address.value).length === 0)){
            return false
        }
        let result = await proxy.$POST({
            url:"/address/defaultAddress",
            params:{
                busid:userInfo.id
            }
        })
        if(result.code){
            address.value = result.data
            return false
        }else{
            proxy.$fail(result.msg)
            return false
        }
    }

    // 选择收货地址
    const selectAdd = () =>{
        proxy.$router.push({
            path:"/address/index",
            query:{
                action:"order"
            }
        })
    }
    // 得到选择的地址
    if(proxy.$cookies.get("address")){
        address.value = proxy.$cookies.get("address")
        // 清除cookie
    }

    // 订单备注
    let remark = ref("")

    // 提交订单
    const onSubmit = async () => {
        console.log(proid)
        proxy.$dialog({
            title:"提醒",
            message:"确认提交订单吗?"
        }).then( async()=>{
                let data = {
                busid:userInfo.id,
                businessaddrid:address.value.id,
                amount:parseFloat((total.value/100).toFixed(2)) ,
                remark:remark.value,
                proid,
                cartid:id
            }
            let result = await proxy.$POST({
                url:"/cart/orderCommit",
                params:data
            })
            if(result.code){
                let orderId = result.data
                // 跳转支付界面
                proxy.$success({
                    message:result.msg,
                    duration:1000,
                    onClose:()=>{
                        // 删除地址cookie
                        proxy.$cookies.remove("address");
                        proxy.$router.push({
                            path:"/cart/pay",
                            query:{
                                id:orderId
                            }
                        })
                    }
                })
            }else{
                proxy.$fail(result.msg)
                return false
            }
        }).catch((err)=>{
            console.log(err)
            proxy.$fail(err)
        })
    };

</script>

<style>
    .orderitemList{
        margin-top: 1.25rem;
        margin-bottom: 5rem;
    }

    #order .van-submit-bar__bar{
        margin-bottom: 1.25rem;
    }

    #order .van-address-item{
        background-color: #f6f6f6;
    }

    #order #van-field-1-input{
        border: 1px solid ;
        border-radius: 5px;
        padding: 5px;
    }
</style>